Using Check Boxes to Select Records
Description
This example shows how to use check boxes in a grid to select records to print. In this case the example prints labels, but the technique is applicable to selecting records for any process. This example passes the selected list of Customer_IDs to a second page named PrintLabel.a5w. It prints the appropriate records using the CustomerLabels label layout or Letter to Customers letter layout of the AlphaSports customer table.
Create a new read-only grid tabular component based on the AlphaSports customer table with a search part.
Display the Grid > Query (DBF) page.
Enter "Lastname" in the Order field.
Selecting the Fields to Display
Display the Grid > Fields page.
Press CTRL and click to select the "Customer_ID", "Firstname", "Lastname", "Company", "Phone", "Bill_Address_1", "Bill_City", "Bill_State_Region", "Bill_Postal_Code", "Bill_Country", and "Email" fields.
Press the '>' icon to add them to the Selected Fields list.
Select the "Customer_Id" field in the Selected Fields list:
Select "True" in the Column Properties > Freeform layout list (click the check box).
Click in the Column Properties > Freeform template field to display the Freeform Column Layout dialog.
Enter the following HTML code and click OK. This line of code adds the "Customer_Id" to a check box selection list.
<input type="check box" name="cust_id[]" value=" {Customer_Id} ">
Add white-space: nowrap; to each field's Label Properties > In-line style field.
Change the C olumn Properties > Column heading values as follows:
Change "Bill_Address_1" to "Address".
Change "Bill_City" to "City".
Change "Bill_State_Region" to "State".
Change "Bill_Postal_Code" to "Postal Code".
Change "Bill_Country" to "Country".
Add white-space: nowrap; to each field's Label Properties > In-line style field.
Change the C olumn Properties > Column heading values as follows:
Change "Bill_Address_1" to "Address".
Change "Bill_City" to "City".
Change "Bill_State_Region" to "State".
Change "Bill_Postal_Code" to "Postal Code".
Change "Bill_Country" to "Country".
The "Email" field opens your email client to send a message. To achieve this effect:
Change its Display Settings > Control type to "Link".
Set its Link Properties > Display what in link field to "Value in Field".
Sets its Link Properties > Link address type field to "Field value is an email address".
Setting Grid Properties
Display the Grid > Properties menu.
Select the "Corporate" style in the Select Style dialog box.
Select "True" in the Shading and Dividers > Alternate row shading list (enable the check box).
Defining the Search Part
Display the Search > Fields page.
Press CTRL and click to select the "Customer_ID", "Lastname", "Company", and "Ship_State_Region" in the Available Fields list.
Press the '>' icon to add them to the Selected Fields list.
Display the Search > Properties menu.
Set the Search Options > Initial state to "Closed".
Click Save and name the grid "CustomerGridRadiobuttons". Close the Grid Builder.
Creating the CustomerGridLabels Page
Click New > OK to create a new A5W page.
Click File > Save As, enter "SelectLabelType" in the File name field, and click Save.
Select Insert Component > Select, pick "CustomerGridRadiobuttons", and click OK > OK.
Insert three buttons into the grid into the table cell that contains the Data.
Position the cursor and click the '-' icon to insert a push button. You will notice that the Grid Builder automatically adds beginning and ending form tags.
Position the cursor between the push button and the closing form tag and insert a space character and another push button. Insert another space character and a third push button
Double click the buttons and modify their labels as shown above.
Display the Source tab.
Just after the <head> tag insert the following Javascript code. The determineSelectedRadioButton() function builds a list of Customer_Id values of selected records.
function printLabels() { var toolbar = 'no'; var menubar = 'no'; var location = 'no'; var statusbar = 'no'; var resizable = 'yes'; var width = 750; var height = 500; window.open('PrintLabel.a5w?'+determineCustIdsFromCheck boxes(),'LabelsWindow','location='+location+',menubar='+menubar+',toolbar='+toolbar+',status='+statusbar+',resizable='+resizable+',width='+width+',height='+height) } function determineSelectedRadioButton() { var retVal = ''; for (i = 0; i < document.SelectCustomer.cust_id.length; i++) { if (document.SelectCustomer.cust_idi.checked) { retVal = document.SelectCustomer.cust_idi.value; break; } } return retVal; }The next step is to modify the HTML table that contains the Xbasic commands to display the various grid component parts. The unmodified code will look something like this.
<table> <tr> <td> <%A5 ?x_out.Output.Body.Grid_Echo %> </td> </tr> <tr> <td> <%A5 ?x_out.Output.Body.UpdateErrors %> </td> </tr> <tr> <td> <%A5 ?x_out.Output.Body.Search_HTML %> </td> </tr> <tr> <td> <%A5 ?x_out.Output.Body.Grid_HTML %> <form method=post> <input id=button1 type=button value="Print Labels" name=button1> <input id=button2 type=button value="Print Labels (open in a new window)" name=button2> <input id=button3 type=button value="Clear Selections" name=button3> </form></td> </tr> <tr> <td> <%A5 ?x_out.Output.Body.DetailView_HTML %> </td> </tr> </table>Modify this code as follows.
1. When the user selects a customer using a radio button and then clicks the "Print Labels" or "Print Labels (open in a new window)" button, the form data is submitted to a page named "PrintLabel.a5w". This page builds a query for the selected customer and then generates a PDF file containing the selected label or letter.
<form method=post>
becomes
<form name=SelectCustomer method=post action="printlabel.a5w">
2. The three buttons are modified to apply the current style sheet's button style.
<input
becomes
<input class=" <%a5 ? tmpl.style_name %> Button"
3. Change the type parameters of the three buttons. The first button submits the page and loads the page specified in the <form> tag above. Thus, you need to change the code from:
type=button
to
type=submit
4. The second button works differently. Instead of submitting the form, this button uses client-side JavaScript to open a new browser window and load the labels within it, using the Javascript printLabels() function. This JavaScript has control over the size of the window as well as other properties such as whether or not the window has toolbars or can be resized. Thus, you need to add this code at the end of the <button> tag:
onclick="printLabels();"
5. The third button uses the standard form technique for clearing current selections. You need to change the code from:
type=button
to
type=clear
The revised <form> and <button> code looks like this.
<form name=SelectCustomer method=post action="printlabel.a5w"> <input class="<%a5 ? tmpl.style_name %>Button" type=submit value="Print Labels"> <input class="<%a5 ? tmpl.style_name %>Button" type=button value="Print Labels (open in a new window)" onclick="printLabels();"> <input class="&l;%a5 ? tmpl.style_name %>Button" type=reset value="Clear Selections"> </form>
Save the page and close the HTML Editor.
Creating the PrintLabels Page
Create a new A5W page and switch to the Source view in the HTML Editor.
Paste the following code above the <html> tag.
<%a5 if eval_valid("cust_id") if cust_id[1] = "" goto CustidNotSpecified end if dim filter as c dim order as c filter = cust_id.dump() filter = *for_each(x,"customer_id = " + quote(x),filter) filter = strtran(alltrim(filter), crlf()," .or. ") order = "" dim filename as c filename = session.session_folder + chr(92) + "templabels.pdf" filename = label.saveas("CustomerLabels@[PathAlias.ADB_Path]\customer.dbf","PDF",filter,order,filename,.f.) if file.exists(filename) response.redirect(session.session_url + "templabels.pdf?" + time("hms3")) end end if else CustidNotSpecified: %>This Xbasic code first checks to see if it has received the cust_id parameter from the calling page. If it has been received and exists, the code next checks to see if it contains any values. If not, the script goes to the error handler CustidNotSpecified:.
<%a5 if eval_valid("cust_id") if cust_id[1] = "" goto CustidNotSpecified end ifIf the script continues, it uses the *for_each() function to build a list of arguments for a filter expression, separating each argument with an .or. operator.
dim filter as c dim order as c filter = cust_id.dump() filter = *for_each(x,"customer_id = " + quote(x),filter) filter = strtran(alltrim(filter), crlf()," .or. ") order = ""
Next, the script creates a filename that is located in the current session folder and passes that name as one of the arguments in the LABEL.SAVEAS() method. Since this is using an Alpha Anywhere print routine, it would only work with an Alpha Anywhere table.
dim filename as c filename = session.session_folder + chr(92) + "templabels.pdf" filename = label.saveas("CustomerLabels@[PathAlias.ADB_Path]\customer.dbf", "PDF", filter, order, filename, .f.)Finally, if the print routine worked and the PDF file was created, the script loads the new PDF file using the RESPONSE.REDIRECT() method. The time("hms3") argument added to the filename guarantees that you open the most recent PDF file, and not any version that might have been cached.
if file.exists(filename) response.redirect(session.session_url + "templabels.pdf?" + time("hms3")) end end if else CustidNotSpecified: %>Paste the following code into the body of the document. It displays an error message if an error occurs.
<p>Error: You must call page with a query string that specifies the Customer ID(s).<br> For example: <%a5 ? request.script_name %> ?cust_id[]=000001&cust_id[]=000013</p>
Save the PrintLabel.A5W page and display the A5W Pages tab of the Web Projects Control Panel.
Right click the "SelectLabelType" page, select Publish (Local Webroot) and open.
Select a couple of records and try the different print buttons.